<template>
	<a-tabs :tabBarGutter="0" hideAdd v-model:activeKey="activeKey" type="editable-card" @edit="onEdit"
		:class="clsx('route-tabs', className)">
		<a-tab-pane v-for="pane in routeTabs" :key="pane.key" :tab="pane.title" closable />
	</a-tabs>
</template>
<script lang="ts" setup>
import { useRouteTabStore } from '@/store/index.ts';
import clsx from 'clsx';
import { storeToRefs } from 'pinia';
import { watch } from 'vue';
import { useRouter } from 'vue-router';

const routeTabStore = useRouteTabStore();
const { routeTabs, activeKey } = storeToRefs(routeTabStore);
const router = useRouter();

defineProps<{
	className: string;
}>();

watch(
	activeKey,
	(newVal, oldVal) => {
		if (newVal !== oldVal) {
			router.push(newVal);
		}
	},
	{
		immediate: true,
	},
);

const onEdit = (targetKey: string, action: string) => {
	if (action === 'remove') {
		routeTabStore.remove(targetKey);
	}
};
</script>

<style lang="less" scoped>
.route-tabs {
	:deep(.ant-tabs-tab) {
		border-radius: unset !important;
	}
}
</style>
